// 聊天列表页面样式
.chat-list {
    background-color: #f5f5f5;
    min-height: 100vh;

    &-item {
        display: flex;
        align-items: center;
        padding: 24rpx 32rpx;
        background-color: #fff;
        border-bottom: 1rpx solid #f0f0f0;
        position: relative;

        &:active {
            background-color: #f8f8f8;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    &-avatar {
        width: 96rpx;
        height: 96rpx;
        border-radius: 12rpx;
        margin-right: 24rpx;
        flex-shrink: 0;

        image {
            width: 100%;
            height: 100%;
            border-radius: 12rpx;
        }
    }

    &-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0; // 防止内容溢出
    }

    &-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 8rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &-message {
        font-size: 28rpx;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.4;
    }

    &-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-left: 16rpx;
        flex-shrink: 0;
    }

    &-time {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
    }

    &-notification {
        width: 16rpx;
        height: 16rpx;
        background-color: #ff4444;
        border-radius: 50%;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8rpx;
            height: 8rpx;
            background-color: #fff;
            border-radius: 50%;
        }
    }
}

// 空状态样式
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 200rpx 0;

    &-icon {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 32rpx;
        opacity: 0.3;
    }

    &-text {
        font-size: 28rpx;
        color: #999;
    }
}

// 加载状态样式
.chat-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx 0;

    &-text {
        font-size: 28rpx;
        color: #999;
        margin-left: 16rpx;
    }
}
